<template>
    <div>
        <!-- 搜索组件 -->
        <search-form :items="formItems" :params="params" :on-submit="onSearch" :btn-loading="loading" :on-export="onExport" />

        <!-- 表格区域 -->
        <div class="table-body">
            <!-- 左上角按钮 -->
            <div class="table-right-top"></div>

            <!-- 表格 -->
            <el-table border style="width: 100%;" :data="data" v-loading="loading" show-summary :summary-method="getSummaries">
                <el-table-column align="center" prop="date" :label="$i18n.t('DATE')" :min-width="120" fixed="left"></el-table-column>
                <el-table-column align="center" prop="due_num" :label="$i18n.t('DUE_NUM')" :min-width="120"></el-table-column>
                <el-table-column align="center" prop="h2_repayment_num" :label="$i18n.t('H2_REPAYMENT_NUM')" :min-width="120"></el-table-column>
                <el-table-column align="center" prop="h2_repayment_rate" :label="$i18n.t('H2_REPAYMENT_RATE')" :min-width="120"></el-table-column>
                <el-table-column align="center" prop="h1_repayment_num" :label="$i18n.t('H1_REPAYMENT_NUM')" :min-width="120"></el-table-column>
                <el-table-column align="center" prop="h1_repayment_rate" :label="$i18n.t('H1_REPAYMENT_RATE')" :min-width="120"></el-table-column>
                <el-table-column align="center" prop="h0_repayment_num" :label="$i18n.t('H0_REPAYMENT_NUM')" :min-width="120"></el-table-column>
                <el-table-column align="center" prop="h0_repayment_rate" :label="$i18n.t('H0_REPAYMENT_RATE')" :min-width="120"></el-table-column>
                <el-table-column align="center" prop="enter_collection_num" :label="$i18n.t('ENTER_COLLECTION_NUM')" :min-width="120"></el-table-column>
                <el-table-column align="center" prop="enter_collection_rate" :label="$i18n.t('ENTER_COLLECTION_RATE')" :min-width="120"></el-table-column>
                <el-table-column align="center" prop="d2_overdue_num" :label="$i18n.t('D2_OVERDUE_NUM')" :min-width="120"></el-table-column>
                <el-table-column align="center" prop="d2_overdue_rate" :label="$i18n.t('D2_OVERDUE_RATE')" :min-width="120"></el-table-column>
                <el-table-column align="center" prop="d3_overdue_num" :label="$i18n.t('D3_OVERDUE_NUM')" :min-width="120"></el-table-column>
                <el-table-column align="center" prop="d3_overdue_rate" :label="$i18n.t('D3_OVERDUE_RATE')" :min-width="120"></el-table-column>
                <el-table-column align="center" prop="d7_overdue_num" :label="$i18n.t('D7_OVERDUE_NUM')" :min-width="120"></el-table-column>
                <el-table-column align="center" prop="d7_overdue_rate" :label="$i18n.t('D7_OVERDUE_RATE')" :min-width="120"></el-table-column>
                <el-table-column align="center" prop="d10_overdue_num" :label="$i18n.t('D10_OVERDUE_NUM')" :min-width="120"></el-table-column>
                <el-table-column align="center" prop="d10_overdue_rate" :label="$i18n.t('D10_OVERDUE_RATE')" :min-width="120"></el-table-column>
                <el-table-column align="center" prop="d2_repayment_num" :label="$i18n.t('D2_REPAYMENT_NUM')" :min-width="120"></el-table-column>
                <el-table-column align="center" prop="d2_repayment_rate" :label="$i18n.t('D2_REPAYMENT_RATE')" :min-width="120"></el-table-column>
                <el-table-column align="center" prop="d3_repayment_num" :label="$i18n.t('D3_REPAYMENT_NUM')" :min-width="120"></el-table-column>
                <el-table-column align="center" prop="d3_repayment_rate" :label="$i18n.t('D3_REPAYMENT_RATE')" :min-width="120"></el-table-column>
                <el-table-column align="center" prop="d7_repayment_num" :label="$i18n.t('D7_REPAYMENT_NUM')" :min-width="120"></el-table-column>
                <el-table-column align="center" prop="d7_repayment_rate" :label="$i18n.t('D7_REPAYMENT_RATE')" :min-width="120"></el-table-column>
                <el-table-column align="center" prop="d10_repayment_num" :label="$i18n.t('D10_REPAYMENT_NUM')" :min-width="120"></el-table-column>
                <el-table-column align="center" prop="d10_repayment_rate" :label="$i18n.t('D10_REPAYMENT_RATE')" :min-width="120"></el-table-column>
                <el-table-column align="center" prop="no_repayment_num" :label="$i18n.t('NO_REPAYMENT_NUM')" :min-width="120" fixed="right"></el-table-column>
                <el-table-column align="center" prop="no_repayment_rate" :label="$i18n.t('NO_REPAYMENT_RATE')" :min-width="120" fixed="right"></el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="table-pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next, ->, sizes"
                    :page-size.sync="page.perPage"
                    :total="page.total"
                    :page-count="page.pageCount"
                    :current-page.sync="page.currentPage"
                    :page-sizes="[15, 20, 30]"
                    @current-change="onCurrentPageChange"
                    @size-change="onPerPageChange"
                >
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import SearchForm from '@/components/SearchForm'
    import { getLoanedPerformance } from '@/api/report'

    export default {
        name: 'loanedPerformance',
        components: { SearchForm },
        data () {
            return {
                params: {},
                data: [],
                page: {
                    total: 0,
                    currentPage: 1,
                    perPage: 15,
                    pageCount: 1
                },
                loading: false,
                drawer: false,
                mdl: {},
                all: {}
            }
        },
        created () {
            this.fetch()
        },
        computed: {
            formItems () {
                const dateType = this.$store.getters.options.LoanedPerformanceDateTypeList
                const LoanType = this.$store.getters.options.LoanedTypeList
                const ChannelList = this.$store.getters.options.ChannelList
                const LoanTerm = this.$store.getters.options.ApplyTermList
                const DueTypeList = this.$store.getters.options.DueTypeList
                // 构建搜索表单
                return [
                    { title: this.$i18n.t('DATE_RANGE'), type: 'date-range', key: 'date' },
                    { title: this.$i18n.t('DATE_TYPE'), type: 'select', key: 'date_type', options: dateType },
                    { title: this.$i18n.t('LOAN_TYPE'), type: 'select', key: 'loan_type', options: LoanType },
                    { title: this.$i18n.t('CUSTOMER_CHANNEL'), type: 'select', key: 'channel_id', options: ChannelList },
                    { title: this.$i18n.t('APPLY_TERM'), type: 'select', key: 'apply_term', options: LoanTerm },
                    { title: this.$i18n.t('DUE_TYPE'), type: 'select', key: 'due_type', options: DueTypeList }
                ]
            }
        },
        methods: {
            // 搜索按钮
            onSearch () {
                this.params.export = 0
                this.fetch()
            },
            // 导出按钮
            onExport () {
                this.params.export = 1
                this.loading = true
                getLoanedPerformance({ ...this.params, page: this.page.currentPage, perPage: this.page.perPage }).then((res) => {
                    console.log(res)
                }).finally(() => {
                    this.loading = false
                })
            },
            // 从接口拉取数据
            fetch () {
                this.loading = true
                getLoanedPerformance({ ...this.params, page: this.page.currentPage, perPage: this.page.perPage }).then((res) => {
                    // eslint-disable-next-line camelcase
                    const { data, last_page, total, all } = res.result
                    this.data = data
                    this.all = all
                    this.page.total = total
                    // eslint-disable-next-line camelcase
                    this.page.pageCount = last_page
                }).finally(() => {
                    this.loading = false
                })
            },
            // 页数切换
            onCurrentPageChange (page) {
                this.page.currentPage = page
                this.fetch()
            },
            // 每页显示数量修改
            onPerPageChange (perPage) {
                this.page.perPage = perPage
                this.fetch()
            },
            // 统计数据
            getSummaries () {
                return [
                    this.$i18n.t('TOTAL'),
                    this.all.due_num,
                    '',
                    '',
                    '',
                    '',
                    '',
                    '',
                    '',
                    '',
                    '',
                    '',
                    '',
                    '',
                    '',
                    '',
                    '',
                    '',
                    '',
                    '',
                    '',
                    '',
                    '',
                    '',
                    '',
                    '',
                    this.all.no_repayment_num,
                    this.all.no_repayment_rate
                ]
            }
        }
    }
</script>

<style lang="less" scoped>
</style>
